<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>源码大数据-API列表页面</title>
    <!-- 1.重置样式 -->
    <link rel="stylesheet" href="../css/normalize.css">
    <!-- 2.公共样式 -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 3.插件样式 -->
    <!-- 4.当前样式 -->
    <link rel="stylesheet" href="../css/API.css">
</head>
<body>
<body>
    <!-- 头部 -->
    <div class="head container-fluid clearfix">
        <!-- logo -->
        <h1 class="logo fl">
            <a href="./home.html"><img src="../imags/new-logo-white2.png" alt=""></a>
        </h1>

        <!-- nav -->
        <ul class="nav fl">
            <li><a href="./home.html">首页</a></li>
            <li class="active"><a href="#">API</a></li>
            <li><a href="#">云服务</a></li>
            <li><a href="./case.html">案例</a></li>
            <li><a href="#">开发者</a></li>
        </ul>
        <!-- 登录login&注册register -->
        <div class="btnbox fr">
            <a class="login" href="./login.html">登录</a>
            <a class="register" href="./register.html">注册有礼</a>
        </div>
    </div>

    <!-- api标题分类 -->
    <div class="container api-text">
        <!-- 标题 -->
        <p class="api-title">API分类</p>
        <!-- a标签分类 -->
        <div class="api-toptext"> 
            <!-- js动态数据渲染 -->
        </div>
        <!-- 搜索框 -->
        <div class="api-Search clearfix">
            <span id="shuju" class="fl">全部</span>
            <div class="dingwei">
                <input class="Search-kuang fl" type="text" placeholder="身份证实名">
                <button class="sousuologo fl"></button>
            </div>
        </div>
        <!-- 分类列表 -->
        <div class="api-list">
            <ul class="list-box clearfix">
                <!-- <li class="list-item fl">
                    <span class="off">企业专用</span>
                    <div id="" class="content">
                        <a href="#">
                            <img src="../imags/API_01.jpg" alt="">
                            <p class="api-name">2021出行防疫政策指南</p>
                            <p class="green">免费</p>
                        </a>
                    </div>
                    <a class="list-btn" href="#">申请数据</a>
                </li> -->
                
            </ul>
            <!-- 分页 -->
            <div class="page-box container">
                <div class="page">
                    <a class="page-link fl cu" href="#">1</a>
                    <a class="page-link fl" href="#">2</a>
                    <a class="page-link fl" href="#">3</a>
                    <a class="page-link fl" href="#">4</a>
                    <a class="page-link fl" href="#">5</a>
                    <a class="page-link fl" href="#">6</a>
                    <a class="page-link fl" href="#">7</a>
                    <a class="page-link fl" href="#">8</a>
                    <span class="fl text">......</span>
                    <a class="page-text bl f16" href="#">下一页</a>
                </div>
            </div>
        </div>
    </div>



    <!-- 尾部 -->
    <div class="foot container clearfix::after">
        <div class="foottext">
            <dl class="text-title fl">
                <dt>联系与支持</dt>
                <a href="#">
                    <dd>400-882-7715</dd>
                </a>
                <a href="#">
                    <dd>售前咨询</dd>
                </a>
                <a href="#">
                    <dd>客服&售后</dd>
                </a>
                <a href="#">
                    <dd>常见问题</dd>
                </a>
                <a href="#">
                    <dd>极速工单</dd>
                </a>
                <a href="#">
                    <dd>投诉与建议</dd>
                </a>
            </dl>
            <dl class="text-title fl">
                <dt>联系与支持</dt>
                <a href="#">
                    <dd>400-882-7715</dd>
                </a>
                <a href="#">
                    <dd>售前咨询</dd>
                </a>
                <a href="#">
                    <dd>客服&售后</dd>
                </a>
                <a href="#">
                    <dd>常见问题</dd>
                </a>
                <a href="#">
                    <dd>极速工单</dd>
                </a>
                <a href="#">
                    <dd>投诉与建议</dd>
                </a>
            </dl>
            <dl class="text-title fl">
                <dt>联系与支持</dt>
                <a href="#">
                    <dd>400-882-7715</dd>
                </a>
                <a href="#">
                    <dd>售前咨询</dd>
                </a>
                <a href="#">
                    <dd>客服&售后</dd>
                </a>
                <a href="#">
                    <dd>常见问题</dd>
                </a>
                <a href="#">
                    <dd>极速工单</dd>
                </a>
                <a href="#">
                    <dd>投诉与建议</dd>
                </a>
            </dl>
            <dl class="text-title fl">
                <dt>联系与支持</dt>
                <a href="#">
                    <dd>400-882-7715</dd>
                </a>
                <a href="#">
                    <dd>售前咨询</dd>
                </a>
                <a href="#">
                    <dd>客服&售后</dd>
                </a>
                <a href="#">
                    <dd>常见问题</dd>
                </a>
                <a href="#">
                    <dd>极速工单</dd>
                </a>
                <a href="#">
                    <dd>投诉与建议</dd>
                </a>
            </dl>
            <dl class="text-title fl">
                <dt>联系与支持</dt>
                <a href="#">
                    <dd>400-882-7715</dd>
                </a>
                <a href="#">
                    <dd>售前咨询</dd>
                </a>
                <a href="#">
                    <dd>客服&售后</dd>
                </a>
                <a href="#">
                    <dd>常见问题</dd>
                </a>
                <a href="#">
                    <dd>极速工单</dd>
                </a>
                <a href="#">
                    <dd>投诉与建议</dd>
                </a>
            </dl>
            <div class="weixin">
                <p class="weixin-title">微信公众号</p>
                <p class="weixin-text">源码时代</p>
                <img src="../imags/wechat-white.png" alt="">
            </div>
        </div>
    </div>
        <!-- 底部 -->
        <p class="footbottom container">
            <a href="#">
                <img src="../imags/bei2.png" alt="">
            </a>
            <a href="#">
                <img src="../imags/bei1.png" alt="">
            </a>
            <span>增值电信业务经营许可证：蜀B2-20180596</span>
            <a href="#">蜀ICP备15006450号-3</a>
            <a href="#">营业执照</a>
            <span class="fr lest">源码大数据股份有限公司©版权所有</span>
        </p>
    <!-- 蒙层 -->
    <div class="mantle">
        <div class="modal">
            <h2><img src="../imags/loginlogo.png" alt=""></h2>
            <div class="toggle-login">
                <a class="active">账号登录</a>
                <span>|</span>
                <a href="#">扫码登录</a>
            </div>
            <div class="login-box">
                <!-- 账号登录 -->
                <div class=" loginlist show">
                    <!-- 内容 -->
                    <div class="account">
                        <!-- 账号 -->
                        <div class="user-name ipt">
                            <input id="name" class="field" type="text" placeholder="用户名/手机号/邮箱">
                            <img id="del-name" src="../imags/clearInput.png" alt="">
                            <span id="error-name" class="error">账号不符合6-12位字母开头，后面跟数字字母的格式</span>
                        </div>
                        <!-- 密码 -->
                        <div class="user-pwd ipt">
                            <input id="pwd" class="field" type="password" placeholder="密码">
                            <img id="del-pwd" src="../imags/clearInput.png" alt="">
                            <span id="error-pwd" class="error">密码格式错误</span>
                        </div>
                        <p class="bl0bf f14 tar">忘记密码</p>
                        <button id="login-btn">登录</button>
                        <p class="zhuceBtn">
                            还没有源码账号，
                            <a href="#">立即注册</a>
                            <span></span>
                        </p>
                    </div>
                </div>
                <!-- 扫码登录 -->
                <div class="loginlist">
                    <!-- 内容 -->
                    <div class="scan">
                        <img src="../imags/showqrcode.jpg" alt="">
                        <p>微信扫码登录</p>
                        <p>未关注源码科技公众号，请先关注后再登录</p>
                    </div>
                    <p class="have ">
                        还没有源码账号，
                        <a href="">立即注册</a>
                        <span></span>
                    </p>
                </div>
            </div>
        </div>
    </div>

        <script src="../lib/dom.js"></script>
        <script src="../lib/tab.js"></script>
        <script src="../js/API.js"></script>
    </body>

</html>